import React from 'react';
import Chart from 'bizcharts/lib/components/Chart';
import Axis from 'bizcharts/lib/components/Axis';
import Geom from 'bizcharts/lib/components/Geom';
import Legend from 'bizcharts/lib/components/Legend';
import Tooltip from 'bizcharts/lib/components/Tooltip';
import DataSet from '@antv/data-set';
import {connect} from 'dva';
import {Button, Col, Form, Input, message, Modal, Popconfirm, Radio, Row, Select, Table, Tabs} from 'antd';      
const R = require('ramda');
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;

const userCharts = Form.create()(class UserCharts extends React.Component {
    constructor(props) {
        super(props);
        this.currentYear = new Date().getFullYear();
        this.lastYear = this.currentYear - 1;
        this.lastTwoYear = this.currentYear - 2;
    }

    componentDidMount() {
        this.props.dispatch({ type: 'charts/getWebOrderYearExportvolumeByParams', payload: { date: this.currentYear } });    
        this.props.dispatch({ type: 'charts/getWebOrderYearNumByParams', payload: { date: this.currentYear } });        
        this.props.dispatch({ type: 'charts/getWebForexYearRecamountByParams', payload: { date: this.currentYear } });              
    }

    
    handleSearch = () => {
        let values = this.props.form.getFieldsValue();
        this.props.dispatch({ type: 'charts/getWebOrderYearExportvolumeByParams', payload: { ...values } });     
        this.props.dispatch({ type: 'charts/getWebOrderYearNumByParams', payload: { ...values } });        
        this.props.dispatch({ type: 'charts/getWebForexYearRecamountByParams', payload: { ...values } });          

    };

    render() {
        const userExportvolumeData = R.isNil(this.props.charts.userExportvolumeData) ? [] : this.props.charts.userExportvolumeData;
        const userOrdernumData = R.isNil(this.props.charts.userOrdernumData) ? [] : this.props.charts.userOrdernumData;
        const userForexRecamountData = R.isNil(this.props.charts.userForexRecamountData) ? [] : this.props.charts.userForexRecamountData;

        const userExportvolumeView = new DataSet.View();
        userExportvolumeView.source(userExportvolumeData).transform({
            type: 'fold',
            fields: ['1m', '2m', '3m', '4m', '5m', '6m', '7m', '8m',  '9m', '10m', '11m', '12m'], // 展开字段集
            key: '月份', // key字段
            value: '金额', // value字段
        });
    
        const userForexRecamountView = new DataSet.View();
        userForexRecamountView.source(userForexRecamountData).transform({
            type: 'fold',
            fields: ['1m', '2m', '3m', '4m', '5m', '6m', '7m', '8m',  '9m', '10m', '11m', '12m'], // 展开字段集
            key: '月份', // key字段
            value: '金额', // value字段
        });

        const userOrdernumView = new DataSet.View();
        userOrdernumView.source(userOrdernumData).transform({
            type: 'fold',
            fields: ['1m', '2m', '3m', '4m', '5m', '6m', '7m', '8m',  '9m', '10m', '11m', '12m'], // 展开字段集
            key: '月份', // key字段
            value: '订单数量', // value字段
        });

        const cols = {
            sales: {
              tickInterval: 15
            }
          };

        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 10 } };

        return (
            <div>
                <Form>
                    <Row>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label={'选择统计时间(年)'}>
                                {getFieldDecorator('date', {
                                    initialValue: this.currentYear
                                })(
                                    <RadioGroup style={{ width: 800 }}>
                                        <Radio value={this.lastTwoYear}>{this.lastTwoYear}年</Radio>
                                        <Radio value={this.lastYear}>{this.lastYear}年</Radio>
                                        <Radio value={this.currentYear}>{this.currentYear}</Radio>
                                    </RadioGroup>
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={6}>
                            <Button type="primary" icon="search" onClick={this.handleSearch.bind(this)}>查询</Button>
                        </Col>
                    </Row>                        
                    
                    <Tabs tabPosition={'top'} style={{ marginTop: 20 }}>
                        <TabPane tab="全年报关完成订单出口额度" key="1">
                            <Chart height={550} data={userExportvolumeView} forceFit disabled={this.props.disabled} style={{ marginTop: 20 }}>
                                <Axis name="月份" title="月份"/>
                                <Axis name="金额" title="金额"/>
                                <Legend position="bottom" />
                                <Tooltip crosshairs={{ type: "y" }} />
                                <Geom type='interval' position="月份*金额" color={'currencytype'} adjust={[{ type: 'dodge', marginRatio: 1 / 32 }]} />
                            </Chart>
                        </TabPane>

                        <TabPane tab="全年已结汇的外汇收汇金额" key="2">
                            <Chart height={550} data={userForexRecamountView} forceFit disabled={this.props.disabled} style={{ marginTop: 20 }}>
                                <Axis name="月份" title="月份"/>
                                <Axis name="金额" title="金额"/>
                                <Legend position="bottom" />
                                <Tooltip crosshairs={{ type: "y" }} />
                                <Geom type='interval' position="月份*金额" color={'claimamountunit'} adjust={[{ type: 'dodge', marginRatio: 1 / 32 }]} />
                            </Chart>
                        </TabPane>

                        <TabPane tab="全年报关完成订单数量" key="3">
                            <Chart height={550} data={userOrdernumView} scale={cols} forceFit>
                                <Axis name="月份" title="月份"/>
                                <Axis name="订单数量" title="数量"/>
                                <Tooltip  crosshairs={{type: "y"}} />
                                <Geom type="interval" position="月份*订单数量" />
                            </Chart>
                        </TabPane>
                    </Tabs>     
                </Form>                
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.charts, charts: state.charts
    };
}

export default connect(mapStateToProps)(userCharts);